<template>
    <el-row class="contain-box">
        <site-nav/>
        <div class="view-body">
            <el-row>
                <el-form class="inline-form" inline>
                    <el-form-item>
                        <el-button @click="$router.go(-1)"><i class="el-icon-arrow-left el-icon--left"/>返回
                        </el-button>
                    </el-form-item>
                    <el-form-item label="应用">
                        <el-select clearable filterable placeholder="请选择" v-model="params.appId">
                            <el-option value="" label="不限"/>
                            <el-option v-for="item in apps" :key="item.appId"
                                       :value="item.appId" :label="getWxAppDisplayName(item)">
                                {{getWxAppDisplayName(item)}}
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="openId">
                        <el-input @clear="search" clearable placeholder="请输入openId" v-model="params.openId"/>
                    </el-form-item>
                    <el-form-item label="unionId">
                        <el-input @clear="search" clearable placeholder="请输入unionId" v-model="params.unionId"/>
                    </el-form-item>
                    <el-form-item label="昵称">
                        <el-input @clear="search" clearable placeholder="请输入昵称" v-model="params.nickNameLike"/>
                    </el-form-item>
                    <el-form-item label="IP">
                        <el-input @clear="search" clearable placeholder="请输入IP" v-model="params.ip"/>
                    </el-form-item>
                    <el-form-item label="登录域">
                        <el-input @clear="search" clearable placeholder="请输入登录域" v-model="params.refererLike"/>
                    </el-form-item>
                    <el-form-item label="激活">
                        <el-select clearable filterable placeholder="请选择" v-model="params.activated">
                            <el-option value="" label="不限"/>
                            <el-option :value="true" label="是"/>
                            <el-option :value="false" label="否"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="登录时间">
                        <el-date-picker
                                v-model="times"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                @clear="search"
                                @change="search"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="search" icon="el-icon-search" type="primary">搜索</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="exportExcel">导出Excel</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <el-col>
                    <el-table :data="list" border size="small">
                        <el-table-column align="center" label="记录ID" prop="loginLogId" width="150"/>
                        <el-table-column align="center" label="openId" prop="openId"/>
                        <el-table-column align="center" label="unionId" prop="unionId"/>
                        <el-table-column align="center" label="昵称" prop="nickName"/>
                        <el-table-column align="center" label="头像" width="80">
                            <template slot-scope="scope">
                                <el-avatar shape="square" :src="scope.row.avatarUrl"/>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="应用" width="200">
                            <template slot-scope="scope">
                                <span>{{scope.row.appName}}</span>
                                <br>
                                <span>({{scope.row.appId}})</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="登录时间" width="90">
                            <template slot-scope="scope">
                                <p class="date-time">{{scope.row.loginTime | dateFormat}}</p>
                                <p class="date-time">{{scope.row.loginTime | timeFormat}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="激活用户" width="80">
                            <template slot-scope="scope">
                                <commons-enable :value="scope.row.activated"/>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="登录IP" prop="ip"/>
                        <el-table-column align="center" label="登录源" prop="referer"/>
                    </el-table>
                </el-col>
            </el-row>
            <el-row>
                <el-col class="pagination">
                    <el-pagination :current-page="params.pageId" :page-size="params.pageSize" :total="count"
                                   @current-change="currentChange" background layout="total, prev, pager, next"/>
                </el-col>
            </el-row>
        </div>
    </el-row>
</template>
<script lang="ts">
  import {PARAMS} from '@/api/http';
  import download from '@/utils/download';
  import {Component, Vue} from 'vue-property-decorator';
  import WxAppApi from '../../api/wxAppApi';
  import Api from '../../api/wxUserLoginLogApi';
  import WxApp from '../../structure/wxApp';
  import {WxAppTypeMap} from '../../structure/wxAppType';
  import Entity from '../../structure/wxUserLoginLog';

  @Component
  export default class Page extends Vue {
    public wxAppTypeMap = WxAppTypeMap;
    public list: Entity[] = [];
    public apps: WxApp[] = [];
    public count: number | null = null;
    public params: PARAMS = {
      pageId: 1,
      appId: '',
      openId: '',
      unionId: '',
      nickNameLike: null,
      activated: '',
      ip: '',
      refererLike: ''
    };
    public times: Date[] = [];

    public created(): void {
      this.$parseParams(this.params, this.$route);
      WxAppApi.all().then((res) => this.apps = res);
      this.getDataList();
    }

    public getWxAppDisplayName(item: WxApp): string {
      return `${item.appName}(${item.appId}) - ${this.wxAppTypeMap[item.wxAppType]}`;
    }

    public getDataList(): void {
      Api.findList(this.getParams()).then((res) => {
        this.list = res.list;
        this.count = res.count;
      });
    }

    public getParams() {
      const params = {...this.params};

      if (this.times && this.times.length) {
        params.loginTimeStartWith = this.times[0];
        params.loginTimeEndWith = this.times[1];
      }
      return params;
    }

    public search(): void {
      this.currentChange(1);
    }

    public currentChange(val: number): void {
      this.params.pageId = val;
      this.getDataList();
    }

    public exportExcel(): void {
      Api.exportExcel(this.getParams()).then((blob) => {
        download(blob, '微信用户登录记录列表 ' + this.$moment(Date.now()).format('YYYY-MM-DD-HH-mm-ss') + '.xlsx');
      });
    }
  }
</script>
